<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        height: 950px;
        width: 100%;
        font-size: 0;
        background-color: pink;
        perspective: 1000px;
        padding-top: 250px;
        box-sizing: border-box;
    }
    
    .box {
        margin: 0 auto;
        background-color: white;
        width: 800px;
        height: 500px;
        border-radius: 20px;
        box-shadow: 0px 0px 40px black;
        /*  */
        transition: all;
        transform-style: preserve-3d;
    }
    
    .bottomBox {
        width: 100%;
        height: 100%;
        text-align: center;
        transition: all;
        box-sizing: border-box;
        padding-top: 70px;
        transform-style: preserve-3d;
    }
    
    .imgOne,
    .imgTwo,
    .imgThree {
        display: inline-block;
        position: relative;
        width: 219px;
        height: 360px;
        border-radius: 20px;
        z-index: 10px;
    }
    
    .bg_box_1,
    .bg_box_2,
    .bg_box_3 {
        display: inline-block;
        position: absolute;
        width: 219px;
        height: 360px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0px 0px 15px black;
    }
    
    .get_img_1,
    .get_img_2,
    .get_img_3 {
        display: inline-block;
        position: relative;
        width: 300px;
        height: 450px;
        top: -40px;
        left: -2px;
        overflow: hidden;
        border-radius: 20px;
        background-repeat: no-repeat;
        background-position-x: -100px;
        background-size: cover;
        filter: blur(2px);
    }
    
    .get_img_1 {
        background-image: url("./1-img.jpg");
    }
    
    .get_img_2 {
        background-image: url("./2-img.jpg");
    }
    
    .get_img_3 {
        background-image: url("./3-img.jpg");
    }
    
    .bg_box_2 {
        left: 290.5px;
    }
    
    .bg_box_3 {
        left: 539.5px;
    }
    
    .imgTwo {
        margin: 0 30px;
    }
    
    .imgOne div,
    .imgTwo div,
    .imgThree div {
        position: absolute;
        width: 219px;
        height: 360px;
        z-index: 10;
        border-radius: 20px;
        background-position-y: 110px;
        transition: all;
        background-repeat: no-repeat;
    }
    
    .imgOne div {
        background-image: url("./3dr_chihiro.png");
        background-size: 70%;
        background-position-x: 40px;
    }
    
    .imgTwo div {
        background-image: url("./3dr_howlcastle.png");
        background-size: 100%;
    }
    
    .imgThree div {
        background-image: url("./3dr_mono.png");
        background-size: 100%;
    }
</style>

<body>
    <div class="box">
        <div class="bottomBox">
            <!-- 模糊背景 -->
            <div class="bg_box_1">
                <div class="get_img_1"></div>
            </div>
            <div class="bg_box_2">
                <div class="get_img_2"></div>
            </div>
            <div class="bg_box_3">
                <div class="get_img_3"></div>
            </div>


            <!-- 人物 -->
            <div class="imgOne">
                <div></div>
            </div>
            <div class="imgTwo">
                <div></div>
            </div>
            <div class="imgThree">
                <div></div>
            </div>
        </div>
    </div>
    <script>
        $(window).on("mousemove", function(e) {
            let roatY = 0;
            let roatX = 0;
            let translateX = 0;
            let translateY = 0;

            if (e.pageX < document.body.offsetWidth / 2) {
                roatY = 20 * (1 - (e.pageX / (document.body.offsetWidth / 2)));
                roatY = roatY >= 0 ? roatY : 0;

                translateX = 40 * (1 - (e.pageX / (document.body.offsetWidth / 2)));
                translateX = translateX + 40
            } else {
                roatY = 20 * ((e.pageX / (document.body.offsetWidth / 2)) - 1);
                roatY = roatY >= 20 ? -20 : "-" + roatY;

                translateX = 40 * ((e.pageX / (document.body.offsetWidth / 2)) - 1);
                translateX = 40 - translateX

            }

            if (e.pageY < document.body.offsetHeight / 2) {
                roatX = 20 * (1 - (e.pageY / (document.body.clientHeight / 2)));
                roatX = roatX >= 0 ? "-" + roatX : 0;


                translateY = 40 * (1 - (e.pageY / (document.body.clientHeight / 2)));
                translateY = translateY + 110
            } else {
                roatX = 20 * ((e.pageY / (document.body.clientHeight / 2)) - 1);
                roatX = roatX >= 20 ? 20 : roatX;


                translateY = 40 * ((e.pageY / (document.body.clientHeight / 2)) - 1);
                translateY = 110 - translateY

            }
            $(" .imgOne div ").css({
                "background-position-x": Number(translateX) + "px",
                "background-position-y": Number(translateY) + "px"
            })
            $(" .imgTwo div ,.imgThree div").css({
                "background-position-x": Number(translateX) - 40 + "px",
                "background-position-y": Number(translateY) + "px"
            })
            $(".get_img_1,.get_img_2 ,.get_img_3 ").css({
                "background-position-x": Number(translateX - 140) + "px",
                "background-position-y": Number(translateY - 110) + "px"
            })

            $('.box').css({
                "transform": "rotateY(" + roatY + "deg) rotateX(" + roatX + "deg)"
            })
        })
    </script>
</body>

</html>